<template>
  <el-form ref="form" :model="distributeForm" :rules="rules" label-width="100px">
    <el-form-item label="标题：" prop="title">
      <el-input
        v-model.trim="distributeForm.title"
        placeholder="请输入标题"
        maxlength="20"
        show-word-limit
      />
    </el-form-item>
    <el-form-item :label="labelName" prop="file">
      <MyUpload :file-list.sync="distributeForm.fileIds" :limit="9" file-size="10" multiple />
    </el-form-item>
    <el-form-item label="内容：" prop="content">
      <div class="message-send-area">
        <div class="text-area">
          <div id="edit-area" contenteditable="true" class="edit-area">
            <el-input
              v-model="distributeForm.content"
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              maxlength="600"
            />
          </div>
          <div class="edit-toolbar">
            <div class="emotion">
              <a>
                <i />
              </a>
              <div class="emotions">
                <div id="emotions-inner">
                  <div>
                    <ul>
                      <li v-for="(count,index) in emojiTest.emoji" :key="index" @click="addEmoji(index)">
                        <span>{{ count }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <p>，按下Enter键换行</p>
            <p>
              还可以输入<em>{{ surplus }}</em>字
            </p>
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import {
  addMessageAndFollowRule,
  deleteRuleById
} from '../../../api/officalAccount/request.js'
import MyUpload from '@/components/pisciculture/distribute/MyUpload'
import emojiList from '../../../assets/officalAccount/emoji.js'
import { mapState } from 'vuex'

export default {
  name: 'MyMedia',
  components: { MyUpload },
  props: {
    labelName: {
      type: String,
      default: ''
    },
    contentType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        title: '',
        content: '',
        htmlContent: '',
        file: [] // 回显的数据 根据fileType判断文件类型 [{fileType:"",url:""}]
      },
      replyContent: '',
      delete: false,
      replyId: 0,
      emojiTest: {},
      activeName: 'first',
      loading: false,
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        fileIds: [
          { required: true, message: '请上传媒体文件', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      distributeForm: state => state.distribute.distributeForm
    }),
    surplus() {
      return 600 - this.form.content.length
    }
  },
  watch: {
    // 移除媒体文件校验
    'form.file': {
      handler(val) {
        if (val) {
          this.$refs.form.clearValidate('file')
        }
      },
      deep: true
    }
  },
  created() {
    this.emojiTest = emojiList
  },
  mounted() {
    this.$store.commit('distribute/SET_CONTENTTYPE', this.contentType)
    console.log('contentType:', this.contentType)
  },
  methods: {
    addEmoji(id) {
      const emoji = this.emojiTest.emoji[id]
      this.form.content += emoji
    },
    getReply() {
      const info = document.getElementById('edit-area').innerText
      const content = [{
        'type': 'text',
        'content': info
      }]
      const params = {
        category: 1,
        content: JSON.stringify(content)
      }
      console.log(typeof params.content)
      addMessageAndFollowRule(params).then(res => {
        console.log(res)
        window.location.reload()
      })
    },
    deleteReply() {
      this.delete = true
    },
    cancleDelete() {
      this.delete = false
    },
    deleteDetermine() {
      this.deleteOn = 1
      deleteRuleById(this.replyId).then(res => {
        console.log(res)
        window.location.reload()
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSubmit() {
      this.$refs.Form.validate((val) => {
        if (val) {
          this.loading = true
          try {
            console.log('form', this.form)
          } catch (error) {
            console.log(error)
          } finally {
            this.loading = false
          }
        }
      })
    },
    handleClose() {
      console.log('关闭表单')
    }
  }

}
</script>
<style scoped lang="scss">
* {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a,button {
        cursor: pointer;
    }

    .hide {
        display: none;
    }
.message-send-area {
        border: 1px solid #E4E8EB;
        background-color: #FFFFFF;
    }
    .message-send-area .change-sec ul {
        overflow: hidden;
        line-height: 38px;
        background-color: #FFFFFF;
    }
    .message-send-area .change-sec ul li {
        float: left;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
    }
    .message-send-area .change-sec ul li::before {
        content: " ";
        display: inline-block;
        width: 22px;
        height: 20px;
        vertical-align: middle;
        margin: -0.2em 5px 0 0;
    }
    .word-sec::before {
        background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_text4273fb.svg);
    }
    .pic-sec::before {
        background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_img4273fb.svg);
    }
    .audio-sec::before {
        background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_audio4273fb.svg);
    }
    .video-sec::before {
        background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_video4273fb.svg);
    }
    .text-area {
        border-top: 1px solid #E4E8EB;
    }
    .edit-area {
        padding: 16px 20px;
        outline: 0;
        color: #353535;
        word-wrap: break-word;
        background-color: #FFFFFF;
        height: 184px;
        overflow-y: auto;
        font-size: 14px;
    }
    .edit-toolbar {
        font-size: 14px;
        padding: 0 20px;
        line-height: 36px;
        background-color: #FFFFFF;
        border-top: 1px solid #E4E8EB;
    }
    .emotion {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        font-size: 14px;
    }
    .emotion:hover .emotions {
        display: block;
    }
    .emotion a {
        float: left;
        height: 28px;
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 0;
        cursor: pointer;
    }
    .emotion a i {
        background: transparent url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/reply/images/icon_emotion4510e1.svg) no-repeat 0 0;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        display: inline-block;
    }
    .edit-toolbar p {
        float: right;
        color: #9A9A9A;
    }
    .edit-toolbar p em {
        font-style: normal;
        margin: 0 3px;
    }

    .emotions {
        width: 396px;
        padding: 5px;
        left: 50%;
        margin-left: -46px;
        top: 100%;
        //position: absolute;
        z-index: 500;
        text-align: left;
        color: #353535;
        line-height: 1.6;
        white-space: normal;
        word-wrap: break-word;
        display: none;
    }
    #emotions-inner {
        position: relative;
        padding: 24px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    #emotions-inner::before {
        position: absolute;
        left: 42px;
        top: -4px;
        content: " ";
        width: 8px;
        height: 8px;
        background-color: #FFFFFF;
        box-shadow: 0 -10px 15px 0 #D4D4D4;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    }
    #emotions-inner ul {
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #emotions-inner ul li {
        float: left;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 0;
        text-align: center;
        background-color: #FFFFFF;
    }
    #emotions-inner ul li span {
        font-size: 16px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        display: inline-block;
        /* background: transparent url(../assets/icon_emotion_panel.2x4be7aa.png) no-repeat 0 0; */
        /* background-size: 20px auto; */
    }
    .tool-bar {
        margin-top: 40px;
        padding-bottom: 65px;
    }
    .tool-bar button {
        margin-right: 1.2em;
        display: inline-block;
        padding: 0 22px;
        min-width: 54px;
        line-height: 2.42857143;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        box-sizing: content-box;
    }
    .save-btn {
        background-color: #07C160;
        border-color: #07C160;
        color: #FFFFFF;
    }
    .delete-btn-sec {
        position: relative;
        display: inline-block;
    }
    .delete-btn {
        background-color: #F5F6F6;
        border-color: #E4E8EB;
        color: #CCCDCD;
    }
    .hide-delete-sec {
        right: 50%;
        margin-right: -38px;
        top: 100%;
        padding-top: 5px;
        width: 280px;
        position: absolute;
        z-index: 500;
        text-align: left;
        color: #353535;
        line-height: 1.6;
        white-space: normal;
        word-wrap: break-word;
        font-size: 14px;
    }
    .delete-sec-inner {
        position: relative;
        padding: 24px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    .delete-sec-inner::before {
        right: 42px;
        top: -4px;
        content: " ";
        width: 8px;
        height: 8px;
        background-color: #FFFFFF;
        box-shadow: 0 -10px 10px 0 #D4D4D4;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: absolute;
    }
    .delete-inner-button {
        margin-top: 24px;
        text-align: center;
    }
    .delete-inner-button button {
        margin: 0 7px;
        display: inline-block;
        padding: 0 22px;
        min-width: 54px;
        line-height: 2.42857143;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        box-sizing: content-box;
    }
    .determine {
        background-color: #07C160;
        border-color: #07C160;
        color: #FFFFFF;
    }
    .cancle {
        background-color: #FBFBFB;
        border-color: #E4E8EB;
        color: #353535;
    }
</style>
